<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				margin: 0 auto;
				width: 400px;
				height: 350px;
				padding: 10px;
				border: 1px solid #d0d0d0;
				/*border-spacing 表格中每个单元之间的距离*/
				border-spacing: 1px;
			}
			
			.fist{
				background-color: dodgerblue;
				color: white;
				text-align: center;
				font-size: 15px;
				font-weight: 200;
			}
			
			.whitegray{
				background-color: lightgray;
				color: black;
                 font: 15px;
                 font-weight: 100px;
                 text-align: center;
			}
			
			/*.whitegray:hover{
				background-color: white;
			}
			*/
			.gray{
				background-color: gray;
				color: black;
				font-size: 15px;
				font-weight: 100px;
				text-align: center;
			}
			
			/*.gray:hover{
				background-color: white;
			}*/
			
			td{
				border: 1px solid #d0d0d0;
			}
			
		</style>
	</head>
	<body>
		<table>
			<tr class="fist">
				<th>序号</th>
				<th>姓名</th>
				<th>课程</th>
				<th>成绩</th>
			</tr>
			
			<tr class="whitegray">
				<td>1</td>
				<td>黄硕</td>
				<td>原子弹</td>
				<td>1000</td>
			</tr>
			
			<tr class="gray">
				<td >2</td>
				<td>莫兰波</td>
				<td>外语</td>
				<td>100</td>
			</tr>
			
			<tr class="whitegray">
				<td>3</td>
				<td>王博</td>
				<td>日语</td>
				<td>50</td>
			</tr>
			
			<tr class="gray">
				<td>4</td>
				<td>唐俊杰</td>
				<td>市场经济</td>
				<td>10</td>
			</tr>
			
			<tr class="whitegray">
				<td>5</td>
				<td>孙元生</td>
				<td>王者荣耀</td>
				<td>10000</td>
			</tr>
			
			<tr class="gray">
				<td>6</td>
				<td>陈佳男</td>
				<td>高等数学</td>
				<td>100</td>
			</tr>
		</table>
	</body>
	
	<script>
//		var gray = document.getElementsByClassName("gray");
//		var whitegray = document.getElementsByClassName("whitegray");
		//这里tr拿到的是一个数组
		var tr = document.getElementsByTagName("tr");
		 
		for(var i=0;i<tr.length;i++){
			 if(i%2!==0){
                tr[i].style.backgroundColor = "#a3a3a3";
            }else{
                tr[i].style.backgroundColor = "#ccc";
            }

           var color = "";
			//数组里面的对象必须要用this
			tr[i].onmouseover = function(){
		    color = this.style.backgroundColor;
		    //alert(color.value);
		   this.style.backgroundColor = "white";
		  }
			
		  tr[i].onmouseout = function(){
		  	this.style.backgroundColor = color;
		  }
		}
		//		tr.onmouseover = function(event){
//				tr.backgroundColor = "white";	
//		}
//		
//		tr.onmouseout = function(event){
//			if(tr.className == "gray"){
//				this.backgroundColor = "gray";
//			}
//			else{
//				this.backgroundColor = "lightgrat";
//			}
//		}
		
	</script>
</html>
